<template>
    <a-layout class="layout">
        <div class="layout-navbar">
            <a-layout-header>
                <topnav></topnav>
            </a-layout-header>
        </div>
        <a-layout class="layout">
            <a-layout-sider style="height: calc(100vh - 60px);width:auto;">
                <left-menu></left-menu>
            </a-layout-sider>
            <a-layout class="layout-content">
                <a-layout-content>
                    <router-view />
                </a-layout-content>
                <Footer />
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue';
import topnav from '@/components/layout/topnav.vue';
import leftMenu from '@/components/layout/menu.vue';
import Footer from '@/components/footer/index.vue'
import db from '@/store/localstorage';
import { useStore } from 'vuex';

const instance = getCurrentInstance();
const mitt = instance?.appContext.config.globalProperties.mittBus;



</script>

<style scoped lang="less">
.layout-content {
    height: calc(100vh - 60px);
    padding: 0 15px;
    overflow-y: auto;
    background-color: var(--color-fill-1);
    transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
</style>
